<template>
  <el-container class="main_con">
    <div class="filter_con ds_block" style="margin-bottom:20px">
      <div class="filter_head">
        <h2>批量发货</h2>
      </div>
    </div>
    <div class="filter_con nopt">
      <el-form class="form_box" ref="form" :model="form" label-width="110px">
        <el-form-item label="模板下载：">
          <el-button
            plain
            icon="el-icon-download"
            @click="ExcelDownloadURl"
            size="medium"
            >Excel文件模板</el-button
          >
          <el-button
            plain
            icon="el-icon-download"
            @click="ExpressDownloadURl()"
            size="medium"
            >快递公司对照模板</el-button
          >
        </el-form-item>
        <el-form-item label="excel导入：">
          <el-upload
            class="upload-demo"
            drag
            multiple
            accept=".xls,.xlsx"
            :action="url + '/' + geturl + '/order/exportData'"
            :headers="headers"
            :on-change="handleChange"
            ref="uploadMutiple"
            :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              如果遇到数据重复不会进行数据更新
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button v-has @click="postr()" type="primary">确认上传</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-container>
</template>

<script>
import { getToken, getShopToken } from "@/utils/auth";
import { geturl } from "@/api/common";
export default {
  data() {
    return {
      form: {},
      fileList: [],
      filename: "",
      headers: {},
      url: process.env.VUE_APP_BASE_API,
      geturl: ""
    };
  },
  mounted() {
    this.geturl = geturl();
    let type = localStorage.getItem("login_type") || null;
    if (type) {
      if (type == "mall") {
        this.headers["Authorization"] = getShopToken();
      } else {
        this.headers["Authorization"] = getToken();
      }
    }
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    postr() {
      this.$refs.uploadMutiple.submit();
    },
    //Excel文件模板
    ExcelDownloadURl() {
      let oURL =
        this.url +
        this.geturl +
        "/order/excelDownload?Authorization=" +
        this.headers["Authorization"];
      window.open(oURL, "_blank");
    },
    //快递公司对照模板
    ExpressDownloadURl() {
      let oURL =
        this.url +
        this.geturl +
        "/order/expressDownload?Authorization=" +
        this.headers["Authorization"];
      window.open(oURL, "_blank");
    }
  }
};
</script>

<style lang="scss" scoped>
.main_con {
  h1 {
    margin: 0.67em 0.35em;
  }
  .el-link {
    margin: 0px 37px 0px 0px;
  }
  .filter_con {
    padding-top: 15px;
    display: block;
    /deep/ .el-alert__title {
      font-size: 20px;
      color: #555;
      font-weight: bold;
    }
    .el-form-item {
      margin-bottom: 15px;
    }
    .form_box {
      margin-top: 20px;
      .el-button {
        padding: 8px 20px;
      }
      .form_tip {
        font-size: 12px;
        color: #666;
        display: block;
        line-height: 25px;
      }
    }
  }
}
.filter_head {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
